<template>
  <div id="add_cate_id">
    <el-dialog
      :title="form.id === 0 ? '新增商品' : '修改商品'"
      :visible.sync="isShow.flag"
      width="50%"
      :before-close="close"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="80px"
        style="text-align: left"
      >
        <el-form-item label="上级分类">
          <el-select v-model="form.pid" placeholder="请选择活动区域">
            <el-option label="一级分类" :value="0"></el-option>
            <el-option
              :label="cate.catename"
              :value="cate.id"
              v-for="cate in cate_list"
              :key="cate.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="分类名称" prop="catename">
          <el-input v-model="form.catename"></el-input>
        </el-form-item>
        <!-- 上传分割线 -->
        <el-form-item label="分类图片" v-if="form.pid != 0">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-change="handleAvatarChange"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 上传分割线 -->
        <el-form-item label="分类状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["isShow", "cate_list"],
  data() {
    return {
      imageUrl: "",
      form: {
        id: 0,
        pid: 0,
        catename: "",
        status: 1,
        img: "",
      },
      rules: {
        catename: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    setData(obj) {
      this.form.id = obj.id;
      this.form.pid = obj.pid;
      this.form.catename = obj.catename;
      this.form.status = obj.status;
      this.form.img = obj.img;
      this.imageUrl = this.static_host + obj.img; //将没有修改的图片地址补全显示
    },
    close() {
      this.form = {
        id: 0,
        pid: 0,
        catename: "",
        status: 1,
        img: "",
      };
      this.isShow.flag = false;
      this.imageUrl = "";
    },
    submit() {
      if (this.form.catename == "") {
        return alert("菜单名称不得为空");
      }
      //如果需要提交带有图片对象的内容，需要构建formdata对象
      var sendData = new FormData();
      sendData.append("pid", this.form.pid);
      sendData.append("catename", this.form.catename);
      sendData.append("status", this.form.status);
      sendData.append("img", this.form.img);

      var url = "/api/cateadd";
      if (this.form.id != 0) {
        url = "/api/cateedit";
        sendData.append("id", this.form.id);
      }
      this.$http.post(url, sendData).then((res) => {
        if (res.code === 200) {
          this.close();
          //重载表单
          this.$emit("reloadCate");
          return;
        }
      });
    },
    handleClose() {},
    handleAvatarChange(file) {
      //在elementui上传组件上，回调函数可以自动接受到修改后的图片对象
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.img = file.raw;
    },
    beforeAvatarUpload(file) {
      //官方代码，勿动！！！
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style>
</style>